<template>
	<view class="page-div">
		<cu-custom :isBack="true" bgColor="bg-white solids-bottom">
			<block slot="content">
				推荐
			</block>
		</cu-custom>
		<view class="warp30"></view>
		<form>
			<view class="cu-form-group">
				<view class="title">楼盘</view>
				<view class="text">吉大海湾花园85平方米3房南向精装楼盘吉大海湾花园85平方米3房南向精装楼盘</view>
			</view>
			<view class="cu-form-title">
				客人信息
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input placeholder="请输入" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机</view>
				<input placeholder="请输入" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<view class="sunsin-group">
					<radio-group @change="checkboxChange" class="select-item-list clearfix">
						<label v-for="(item,index) in radio"
						 :key="index" :class="item.checked ?  'checkd' : ''">
							<radio :value="item.value" :checked="item.checked" v-show="false" />
							<view class="select-item-list-item-btn" >{{item.title}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="cu-form-title">
				备注
			</view>
			<view class="cu-form-group">
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaAInput" placeholder="输入需要备注的内容"></textarea>
			</view>
			<view class="warp120"></view>
			<view class="cu-bar foot">
				<view class="padding flex flex-direction w100">
					<button class="cu-btn bg-red margin-tb-sm lg">确认推荐</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				labelDataList: '',
				labelName: '',
				radio: [{
                        title: '男',
                        value: '0',
                        checked: true
                    }, {
                        title: '女',
                        value: '1',
                        checked: false
                    }],
			};
		},
		methods:{
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			checkboxChange: function(e) {
				this.labelDataList = e.detail.value
				console.log(e)
				console.log('checkbox发生change事件，携带value值为：' + e.detail.value)
				console.log(this.labelDataList, "labelDataList")
				for(let i=0;i<this.radio.length;i++){
					if(this.radio[i].value==e.detail.value){
						this.radio[i].checked = true;
					}else{
						this.radio[i].checked = false;
					}
				}
				console.info(this.radio);
			},
		}
	}
</script>

<style lang="less">
	.page-div{
		min-height: 100%;
		background: #f2f2f2;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	input{
		text-align: right;
	}
	.text{
		overflow: hidden;
		line-height: 60upx;
		height: 60upx;
		flex: 1;
		text-align: right;
		color: #a1a1a1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.title{
		font-size: 28upx;
		padding-left: 20upx;
	}
	.cu-form-title{
		background: #f2f2f2;
		color: #333333;
		padding: 1px 15px;
		line-height: 2.5;
		font-size: 30upx;
	}
	.select-item-title {
		margin-bottom: 10upx;
		line-height: 2;
		color: #666666;
		font-size: 28upx;
		display: block;
	}
	label {
		font-size: 28upx;
		padding: 10upx 20upx;
		margin: 12upx;
		background-color: #eee;
		border-radius: 10upx;
		line-height: 1;
	}
	
	radio-group,
	checkbox-group {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* 
		如有需求,可以更改radio/checkbox激活样式!
	 */
	.checkd {
		color: #fff;
		background-color: #FF5C5C;
	}
	.sunsin-group radio,
	.sunsin-group checkbox {
		display: none;
	}
	.w100{
		width: 100%;
	}
</style>
